
function RealOutput(view, canvasName, skin) {
  this.view = view;
  this.jg = new jsGraphics(canvasName);
  this.skin = skin;
}

RealOutput.prototype.setSkin = function(newSkin) {
  if (this.skin != newSkin) {
    this.skin = newSkin;
    return true;
  }
  return false;
}

RealOutput.prototype.drawElement = function(x, y, xlen, ylen, color, swapped, winning, captured, swappable) {
  var SQUARE = 1;
  var RECTH = 2;
  var RECTV = 3;
  var elType = SQUARE;
  if (xlen > ylen + 2) {
    elType = RECTH;
  }
  if (xlen + 2 < ylen) {
    elType = RECTV;
  }
  this.jg.setColor(swappable ? "#FF0000" : "#888888");
  this.jg.drawRect(x, y, xlen, ylen);
  this.jg.setColor(color == BLACK ? "#000000" : "#FFFFFF");
  var imgPath = "/static/images/" + this.skin + "/";
  var img = (color == BLACK)?imgPath + "black.jpg":imgPath + "white.jpg";
  if (elType == RECTH) {
    img = (color == BLACK)?imgPath + "blackH.jpg":imgPath + "whiteH.jpg";
  }
  if (elType == RECTV) {
    img = (color == BLACK)?imgPath + "blackV.jpg":imgPath + "whiteV.jpg";
  }
  if (winning) {
    this.jg.setColor(color == BLACK ? "#0F770F" : "#BBFFBB");
    img = (color == BLACK)?imgPath + "black_win.jpg":imgPath + "white_win.jpg";
    if (elType == RECTH) {
      img = (color == BLACK)?imgPath + "blackH_win.jpg":imgPath + "whiteH_win.jpg";
    }
    if (elType == RECTV) {
      img = (color == BLACK)?imgPath + "blackV_win.jpg":imgPath + "whiteV_win.jpg";
    }
  }
  if (swapped) {
    this.jg.setColor(color == BLACK ? "#550F0F" : "#FFDDDD");
    img = (color == BLACK)?imgPath + "black_swap.jpg":imgPath + "white_swap.jpg";
    if (elType == RECTH) {
      img = (color == BLACK)?imgPath + "blackH_swap.jpg":imgPath + "whiteH_swap.jpg";
    }
    if (elType == RECTV) {
      img = (color == BLACK)?imgPath + "blackV_swap.jpg":imgPath + "whiteV_swap.jpg";
    }
  }
  if (captured) {
    this.jg.setColor(color == BLACK ? "#DDDDFF" : "#0F0F55");
    img = (color == BLACK)?imgPath + "white_capture.jpg":imgPath + "black_capture.jpg";
    if (elType == RECTH) {
      img = (color == BLACK)?imgPath + "whiteH_capture.jpg":imgPath + "blackH_capture.jpg";
    }
    if (elType == RECTV) {
      img = (color == BLACK)?imgPath + "whiteV_capture.jpg":imgPath + "blackV_capture.jpg";
    }
  }
  if (this.skin == "classic") {
    this.jg.fillRect(x+1, y+1, xlen-1, ylen-1);
  } else if (xlen > 3 && ylen > 3) {
    // NOTE: this function was modified to disable drag and drop
    this.jg.drawImage(img, x+1, y+1, xlen-1, ylen-1);
  }
}

RealOutput.prototype.drawEmpty = function(x, y, xlen, ylen) {
  this.jg.setColor("#888888");
//  this.jg.fillRect(x, y, xlen, ylen);
}

RealOutput.prototype.start = function() {
  this.jg.clear();
}

RealOutput.prototype.flush = function() {
  this.jg.paint();

}
